<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>会员注册</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
		<link rel="stylesheet" href="../css/mint-ui.css" />
		<link rel="stylesheet" href="../css/mobileSelect.css" />
		<link rel="stylesheet" href="../css/main.css" />
		<link rel="stylesheet" href="../css/animate.css" />
	</head>
	<body>
		<div id="app">
			<img src="../images/logo.jpg" class="animated zoomIn" width="100%"/>
			<mt-field label="您的姓名" placeholder="请输入您的姓名" 
				v-model="name"></mt-field>
			<mt-field label="手机号" placeholder="请输入手机号" 
				v-model="phone" :attr="{maxlength:11}"></mt-field>
			<div class="forpw">
				<mt-field label="验证码" placeholder="请输入验证码" 
					v-model="code" :attr="{maxlength:6}" class="codeForget"></mt-field>
				<button id="getCodes" @click="getMa" class="getCode" 
					style="font-size: 14px;border:none;background: none;top:16px">点击获取验证码</button>
			</div>
			<mt-field label="密码" placeholder="请输入6-20位数字字母组合密码"  
				type="password" v-model="passwords" :attr="{maxlength:20}"></mt-field>
			<div class="forpw">
				<mt-field label="宝宝姓名" placeholder="请输入宝宝姓名" 
					v-model="babyName"></mt-field>
				<mt-switch v-model="valueSex" v-if="valueSex==false" @change="sexSelect" class="switchF mainColor">
					女</mt-switch>
				<mt-switch v-model="valueSex" v-else @change="sexSelect" class="switchF mainColor">
					男</mt-switch>
				<span class="selectBir firstB" 
					style="line-height: 48px;">宝宝生日</span>
				<input class="selectBir inputB" placeholder="请选择生日" @click="openPicker" 
					v-model="dateTime" readonly style="border:none;"></input>
			</div>
			<!--日期选择-->
			<mt-datetime-picker 
			    ref="picker"
			    type="date"
			    placeholder="选择生日"
			    year-format="{value}年"
				month-format="{value}月"
				date-format="{value}日"
			    @confirm="handleConfirm">
			</mt-datetime-picker>
			
			<div class="mint-cell-wrapper" style="line-height: 48px;background: #fff;">
				<div class="mint-cell-title">
					<span class="mint-cell-text">居住地址</span>
				</div>
				<div class="mint-cell-value">
					<span id="city" ref="citys">湖北省武汉市东西湖区</span>
					<strong class="mint-field-other">&nbsp; > </strong>
				</div>
			</div>
			
			<br />
			<mt-button type="primary" class="animated zoomInUp" size="large" @click="register">注册为会员</mt-button>
			
		</div>
	</body>
	<script type="text/javascript" src="../js/rem.js" ></script>
	<script type="text/javascript" src="../js/vue.js" ></script>
	<script type="text/javascript" src="../js/mint-ui.js" ></script>
	<script type="text/javascript" src="../js/axios.min.js" ></script>
	<script type="text/javascript" src="../js/mobileSelect.js" ></script>
	<script type="text/javascript" src="../js/moment.js" ></script>
	<script type="text/javascript">
	//去除所有空格
	function removeSpace(str){
		return str.replace(/\s+/g,"");
	}
	//倒计时
	let countdown=90;  
	let phoneReg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
	let passReg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
	function setTime(val) {  
	    if (countdown == 0) {  
	        val.removeAttribute("disabled");  
	        val.innerHTML="获取验证码";  
	        countdown = 90;  
	        return false;  
	    } else {  
	        val.setAttribute("disabled", true);  
	        val.innerHTML="重新发送(" + countdown + "s)";  
	        countdown--;  
	    }  
	    setTimeout(function() {  
	        setTime(val);  
	    },1000);  
	} 

		new Vue({
			el:"#app",
			data:{
				name:"",
				phone:"",
				code:"",
				passwords:"",
				babyName:"",
				valueSex:"true",
				liveCity: "湖北省武汉市东西湖区",
				loanAreaId:"",
				dateTime:"",
				openId:""
			},
			created(){
				this.openId=localStorage.getItem("openId");
			},
			mounted(){
				var self=this;
	            //需要生成全国的省市县对应json
	            axios.get("city3.json").then(function(response){
					self.city=new MobileSelect({
		                trigger: "#city",
		                title: "居住地址",
		                position:[1,0,1],
		                wheels: [
		                    {data: response.data}
		                ],
		                callback:function(indexArr, data){
			                	self.liveCity=data[0].value+data[1].value+data[2].value;
			                	//显示城市
							self.$refs.citys.innerText=self.liveCity;
							self.loanAreaId=data[2].id;
							console.log(self.loanAreaId);
		                }
		            });
				});
			},
			methods:{
				openPicker:function(){
			        this.$refs.picker.open();
			        console.log(this.dateTime);
			    },
			    handleConfirm:function(data){
			   	 	//moment是格式化日期插件
			    		let date = moment(data).format('YYYY年MM月DD日');
      				this.dateTime = date;
			    },
				//注册
				register:function(){
					this.name=removeSpace(this.name);
					this.phone=removeSpace(this.phone);
					this.code=removeSpace(this.code);
					this.passwords=removeSpace(this.passwords);
					this.babyName=removeSpace(this.babyName);
					if(this.name==""){
						this.$toast("请输入您的姓名");return;
					}else if(this.phone == "" || !phoneReg.test(this.phone)){
//						this.$toast({message:"请输入正确的手机号码格式",duration:1000});
						this.$toast("请输入正确的手机号码格式");return;
					}else if(this.passwords == "" || !passReg.test(this.passwords)){
						this.$toast("请输入6-20位数字字母组合密码");return;
					}else if(this.code == ""){
						this.$toast("请输入验证码");return;
					}else if(this.babyName==""){
						this.$toast("请输入宝宝的姓名");return;
					}else if(this.dateTime == ""){
						this.$toast("请选择宝宝的生日");return;
					}
					console.log(this.name+","+this.phone+","+this.code+","+this.passwords+","+
					this.babyName+","+this.valueSex+","+this.dateTime+","+this.liveCity);
					let params={
						name: this.name,
						phone: this.phone,
						password:this.passwords,
						code: this.code,
						phone: this.phone,
						babyOne: this.babyName,
						valueSex: this.valueSex,
						dateTime: this.dateTime,
						liveCity:this.liveCity,
						loanAreaId:this.loanAreaId,
						openId:this.openId
					};
					axios.post('http://106.13.55.49/api/jdUser/register',params)
						.then(data => {
							console.log(data);
							let self=this;
							if(data.data.status == 200){
								this.$toast({message:"恭喜您注册成功",duration:1500});
								setTimeout(function(){
									location.href="vip.html?openId="+self.openId;
								},2000);
								
							}else{
								this.$toast(data.data.message);return;
							}
							
					})
				},
				//获取验证码
				getMa:function(){
					let codes=document.getElementById("getCodes");
					if(this.phone == "" || !phoneReg.test(this.phone)){
						this.$toast("请输入正确的手机号码格式");return;
					}else{
						setTime(codes);
						axios.post("http://106.13.55.49/api/jdUser/phoneCode",{
							phone:this.phone,
							type:"reg"
						}).then(data => {
							console.log(data);
						});
					}
					
				},
				//性别选择
				sexSelect:function(){
					console.log(this.valueSex);
				},
			}
			
		})
	</script>
</html>
